<template>
    <div v-show="!isDel" class="card">
        <div class="h">
            <h1></h1><b>{{batch.BH}}</b> <span v-show="!isJK">{{batch.CDName}}  {{batch.CType}}</span><span v-show="isJK"></span></div>
        <ul @click="go" class="cs">
            <li>
                <h5>等级</h5>
                <b>{{batch.DengJi}}</b>
            </li>
            <li>
                <h5>长度</h5>
                <b>{{batch.ChangDu}}</b>
            </li>
            <li>
                <h5>强力</h5>
                <b>{{batch.QiangLi}}</b>
            </li>
            <li>
                <h5>马值</h5>
                <b>{{batch.MaZhi1 + '-' + batch.MaZhi2}}</b>
            </li>
            <li v-show="!isJK">
                <h5>含杂</h5>
                <b>{{batch.HanZa}}</b>
            </li>
            <li v-show="!isJK">
                <h5>整齐度</h5>
                <b>{{batch.ZhengQiDu}}</b>
            </li>
        </ul>
        <div class="ck">
            <div class="f3">
                <font class="max8">
                    <font class="c999">收货地：</font>{{batch.JHD}}</font>
            </div>
            <div class="f3">
                <font class="max8">
                    <font class="c999">买家：</font>{{batch.NeedEntName}}</font>
            </div>
        </div>
        <div class="price">
            <div class="time">
                <h5>最晚交货时间</h5>
                <h4>{{formatDate(batch.LatestDate)}}</h4>
            </div>
            <div class="f3" >
                <h4 :class="{'gray':!batch.Status}">{{batch.StatusCode}}</h4>
                {{batch.NeedNum}}{{batch.NeedDW}}
            </div>
            <div>
                <button style="line-height:3em;" v-show="!manage" @click="go"><i v-show="batch.BatchNum>0" class="num">{{batch.BatchNum}}</i> 我要报价</button>
                <i v-show="manage" @click="endSupply" class="iconfont icon-xianshizhongzhi">结束采购</i>
                 <i v-show="manage" @click="delSupply" class="iconfont red icon-shanchu2">删除采购</i>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        Toast,
        Dialog
    } from 'vant';
    import api from '@/api/api'
    export default {
        props: {
            batch: Object,
            manage:false
        },
        data() {
            return {
                isDel: false
            }
        },
        methods: {
            go() {
                this.$router.push('/baojia/'+this.batch.ID)
            },
            formatDate(str){
                if(str)
                {
                    return str.substring(0,10);
                }
            },
            endSupply() {
                Dialog.confirm({
                    title: '提示',
                    message: '确定终止采购？'
                }).then(() => {
                    
                    var para = {
                        SupplyID:this.batch.ID,
                        UserID:this.$store.state.userInfo.ID
                    }
                    
                    api.endSupply(para).then(res=>{
                        if(res.success)
                        {
                            Toast.success(res.msg); 
                            this.batch.StatusCode= '采购结束';   
                            this.batch.Status = false;                        
                        }else
                        {
                            Toast.fail(res.msg);
                        }
                        
                    })
                }).catch(() => {
                    // on cancel
                });
            },
            delSupply() {
                Dialog.confirm({
                    title: '提示',
                    message: '确定删除采购？'
                }).then(() => {
                    
                    var para = {
                        SupplyID:this.batch.ID,
                        UserID:this.$store.state.userInfo.ID
                    }
                    
                    api.delSupply(para).then(res=>{
                        if(res.success)
                        {
                            Toast.success(res.msg); 
                            this.isDel= true;                           
                        }else
                        {
                            Toast.fail(res.msg);
                        }
                        
                    })
                }).catch(() => {
                    // on cancel
                });
            }
        },
        computed: {
            isJK: function() {
                return (this.batch.NeedType == 2 || this.batch.NeedType == 3);
            }
        }
    }
</script>

<style scoped lang='less'>
    .card {
        background: #fff;
        margin: 5px 0 0 0;
        padding: 5px 10px 0 10px;
        text-align: left;
        font-size: 16px;
        position: relative;
        overflow: hidden;
        .gray{
            color: #999 !important;
        }
        .price {
            width: 100%;
            display: flex;
            height: 3.5em;
            // line-height: 3.5em;
            text-align: center;
            .red{
                color: #ff5500 !important;
            }
            .iconfont{
                font-size: 16px;
                color: #2dbaba;
                display: inline-block;
                margin-top: 0.2em;
            }
            .time {
                color: #ff5500;
                line-height: 1.2em;
                h5 {
                    font-size: 12px;
                    margin-top: 0.5em;
                }
            }
            >div {
                flex: 2;
                border: 1px solid #f0f0f0;
                border-right: 0;
            }
            >div:last-child {
                border-right: 1px solid #f0f0f0;
            }
            .f3 {
                flex: 3;
                line-height: 1.4em;
                font-size: 14px;
                color: #333;
                h4 {
                    margin-top: 0.5em;
                    color: #ff5500;
                    font-size: 16px;
                }
            }
            button {
                outline: 0;
                border: 0;
                width: 100%;
                background: #2cb98e;
                color: #fff;
                position: relative;
                .num {
                    border-radius: 50%;
                    height: 1.5em;
                    width: 1.5em;
                    font-size: 12px;
                    color: #fff;
                    background: #ff5500;
                    top: 0.5em;
                    right: 0.4em;
                    display: block;
                    line-height: 1.5em;
                    position: absolute;
                }
            }
        }
        .h {
            padding-left: 10px;
        }
        >div {
            position: relative;
            h1 {
                position: absolute;
                top: 3px;
                left: 0;
                width: 4px;
                height: 1em;
                font-size: 16px;
                background: #2dbaba;
                padding: 0;
                margin: 0;
            }
        }
        .cs {
            margin-top: 10px;
            color: #333;
            display: flex;
            width: 100%;
            font-size: 16px;
            li {
                flex: 1;
                border: 1px solid #f2f2f2;
                text-align: center;
                border-right: 0;
            }
            li:last-child {
                border-right: 1px solid #f2f2f2;
            }
            h5 {
                color: #333;
                height: 2em;
                line-height: 2em;
            }
            b {
                font-weight: normal;
                font-size: 16px;
                font-weight: bold;
            }
        }
        .ck {
            display: flex;
            height: 3em;
            line-height: 3em;
            text-align: center;
            font-size: 14px;
            .max8 {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                max-width: 12em;
                display: inline-block;
            }
            >div {
                border: 1px solid #f2f2f2;
                border-top: 0;
                border-right: 0;
            }
            >div:last-child {
                border-right: 1px solid #f2f2f2;
            }
            .f4 {
                flex: 4;
            }
            .f3 {
                flex: 3;
            }
        }
    }
</style>